<template>
  <div style="width: 1440px">
    <el-carousel :interval="2000" type="card" height="300px" width="1400px">
      <el-carousel-item v-for="item in lunbotu" :key="item.index">
        <img :src="item.url" />
      </el-carousel-item>
    </el-carousel>

    <div class="GuessULike" style="width: 1200px; background-color: white">
      <h2 style="margin-left: 90px">
      {{name}}  <el-tag style="color: OrangeRed">好货推荐</el-tag>
      </h2>

     <el-row>
        <el-col
          :span="8"
          v-for="(item,id) of List"
          :key="id"
          :offset="item.index > 0 ? 2 : 0"
        >
          <el-card
            :body-style="{ padding: '0px' }"
            shadow="hover"
            style="width: 200px; height: 265px"
            class="youhaohuoHover"
          >
            <img
              :src="'http://localhost:5000/files/'+item.imageid"
              class="image"
            />
            <div style="panding: 0px">
              <el-button type="text" class="button" @click="gotoDetails(item)"
                >点我购买</el-button
              >
              <div class="bottom clearfix">
                <span>￥{{item.spuprice}}</span>
                <br />
                <span>{{item.spuname}}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {getSubClassify} from "../api/goods"
export default {
  data(){
    return{
      id:"",
      name:"",
      List:[],
      lunbotu:[
        { url: require("@/views/imgs/lunbotu1.webp") },
        { url: require("@/views/imgs/lunbotu2.webp") },
        { url: require("@/views/imgs/lunbotu3.webp") },
        { url: require("@/views/imgs/lunbotu4.webp") },
        { url: require("@/views/imgs/lunbotu5.webp") },
      ],
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.name = this.$route.query.name;
    console.log(this.$route.query);
    // this.name = this.$route.query.name;
    console.log(this.id);
  },
  mounted(){
   getSubClassify(this.id).then((data)=>{
       console.log(data.data);
       this.List=data.data
       console.log(this.List);
   }).catch((err)=>{
       console.log(err);
   })
  },
  methods:{
    gotoDetails(item){
      this.$router.push("/details?id=" + item.supid);
      console.log(item.id);
    },
  }
};
</script>

<style scoped>
.el-card:hover {
  margin-top: -5px;
}
.el-col-8 {
  width: 12.5%;
  margin-top: 2%;
}
.el-row {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
}
.el-col {
  border-radius: 4px;
  align-items: stretch;
  margin-bottom: 40px;
  margin-left: 90px;
}
.image {
  width: 200px;
  height: 180px;
}


.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
img{
  width:100%;
  height: 100%;
}
</style>